<template>
  <!-- ElRow 是 element-plus 中提供的布局组件，它表示整行 -->
  <el-row>
      <!-- ElCol 是 element-plus 中提供的布局组件，它表示整行中的列 -->
      <el-col :span="4" class="logo-wrapper">
        LOGO
      </el-col>
      <el-col :span="20">
        <!-- 当 router 为 true 时，表示为 导航菜单 启用 VueRouter 支持  -->
        <el-menu mode="horizontal" :router="true">
          <!-- 若已启用 VueRouter 支持，则可以通过 index 来指定 路由路径 -->
          <el-menu-item index="/">Home</el-menu-item>
          <el-menu-item index="/about">About</el-menu-item>

          <!-- ElSubMenu 组件用于定义子菜单 -->
          <el-sub-menu index="user">
            <template #title>用户</template>
            <!-- 在路由记录中 path 的取值为 `/user/:id` 因此 1234 就是参数值 -->
            <el-menu-item index="/user/1234">张三丰</el-menu-item>
            <el-menu-item index="/user/4321">郭襄</el-menu-item>
            <el-menu-item index="/user/1122">杨过</el-menu-item>
          </el-sub-menu>

          <el-menu-item index="/topic/list">话题列表</el-menu-item>

          <el-sub-menu index="receiver">
            <template #title>路径参数</template>
            <el-menu-item index="/receiver/1234/sanfeng">
              通过路由路径传递参数
            </el-menu-item>
            <el-menu-item index="receiver" :route="{ name: 'receiver', params: { args: [5, '殷素素']} }">
              通过绑定对象传递参数
            </el-menu-item>
            <!-- 绑定 click 事件监听器
                 并通过 capture 修饰指定在捕获阶段处理事件，
                 最后阻止事件传播(通过stop修饰符实现) -->
            <el-menu-item index="receive-second" @click.capture.stop="open">
              编程式导航
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-col>
  </el-row>
</template>

<script>
export default {
  name: 'HeaderView',
  methods: {
    open(){
      // this.$router.push( '/receiver/1122/张翠山/25' );
      // this.$router.push( { name: 'receiver', params: { args: [5, '殷素素'] } );
      this.$router.push( { 
        name: 'receiver', 
        params: { args: [ 6 , '谢逊' ] } ,
        query: { age: 40 , gender: 'male' }
      } );
    }
  }
}
</script>

<style>
.logo-wrapper {
  background: #ffffcc;
  line-height: 10vh;
  text-align: center;
}
</style>